<template>
  <div class="h100">
    <div class="home-bac">
      <img src="~@/assets/reception/background1.png" alt="" >
    </div>
    <div class="home-main">
      <div class="service">
        <span class="service-title">查找服务</span>
        <div class="service-bac">
          <div class="service-search">
            <a-input-search
              placeholder="请搜索，如机器维修"
              enter-button="搜索"
              size="large"
              @search="onSearch"
            />
          </div>
          <div class="service-hot">
            <img src="~@/assets/reception/home/recommendations.png" alt="">
            <div class="hoticon-items">
              <div class="hoticon-item" v-for="(item,index) in hotIconList" :key="index" @click="routerpush()">
                <img :src="upload + item.uflist[0].WJLJ" alt="">
                <span>{{ item.NAME }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAppGetFWLBListApi } from '@/api/resService'
import router from '@/router/index';
export default {
  name: 'findServices',
  data() {
    return {  
      hotIconList:[],
      upload:process.env.VUE_APP_API_BASE_URL,
    }
  },
  methods: {
    onSearch(value) {
      console.log(value);
    },
    getAppGetFWLBList(){
      getAppGetFWLBListApi(
        {
          pageSize:10,
          pageIndex:1,
          RMTJ:1,
        }
      ).then((res) => {
        console.log('res',res);
        this.hotIconList = res.data
      })
      .catch((err) => {
      })
      .finally(() => {
      })
    },
    routerpush(){
      this.$router.push({ path: '/reception/equipment/index' });
    }
  },
  mounted() {
    this.getAppGetFWLBList()
  },
}
</script>

<style lang="less" scoped >
.home-bac{
  img{
    height: 230px;
    width: 100%;
  }
}
.home-main{
  margin-top:30px ;
  .service{
    margin: 0 auto;
    height: 380px;
    width: 1600px;
    // padding: 0 20px;
    .service-bac{
      height: 100%;
      background-image:url(../../../assets/reception/home/bacimg.png) ;
    }
    .service-title{
      color: #1e50ae;
      font-size:24px ;
      display: block;
      width: 100%;
      border-bottom: 2px solid #1e50ae;
    }
    .service-search{
      margin: 20px auto;
      margin-top:0;
      padding-top: 20px;
      width: 1500px;
      .ant-input-group .ant-input{
        border: none;
        background: #edf2f5;
      }
    }
    .service-hot{
      margin: 0 50px;
      img{
        height: 24px;
      }
      .hoticon-items{
        display: flex;
        flex-wrap: wrap;
        .hoticon-item{
          width: 10%;
          display: flex;
          margin: 20px 0;
          flex-direction: column;
          text-align: center;
          img{
            width: 34px;
            height: 34px;
            display: block;
            margin: 0 auto;
            cursor: pointer;
          }
          span{
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>